<template>
    <div class="header">
            <img src="@/assets/images/logo.png" alt="" class="logo">
            <i class="iconfont icon-chouti" @click="showDrawer"></i>
            <cube-drawer
            ref="drawer"
            title=""
            :data="categories"
            @select="selectHandler"
            ></cube-drawer>
            
    </div>
</template>
<script>
export default {
    props:{
        category:{
            type:Array,
            default:()=>[]
        }
    },
    computed: {
        categories(){
            let defaultActive = [{text:"全部课程",value:-1}]
            return this.category.length>0?[[...defaultActive,...this.category]]:[defaultActive];//返回数组
        }
    },
    methods: {
        showDrawer() {
            this.$refs.drawer.show()
        },
        selectHandler(value){
            this.$emit('change',value)
        }
        
        
    },
    mounted() {
        // console.log(this.category)
    },
}
</script>
<style lang="less">
.header{
     background: #2a2a2a;
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: 56px;
     padding: 0px 20px;
     .logo {
         display: block;
         height: 100%;
         width: 120px;
     }
    .icon-chouti{
        font-size: 25px;
        color: #fff;
    }
 }   
</style>